<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FinanceApp - 个人财务管理应用</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header>
            <div class="logo neon-text">FinanceApp</div>
            <nav>
                <ul>
                    <li><a href="#" data-target="home">首页</a></li>
                    <li class="auth-required" style="display: none;"><a href="#" data-target="dashboard">仪表板</a></li>
                    <li class="auth-required" style="display: none;"><a href="#" data-target="bills">账单</a></li>
                    <li class="auth-required" style="display: none;"><a href="#" data-target="budgets">预算</a></li>
                    <li class="auth-required" style="display: none;"><a href="#" data-target="reports">报表</a></li>
                    <li class="auth-not-required"><a href="#" data-target="login">登录</a></li>
                    <li class="auth-not-required"><a href="#" data-target="register">注册</a></li>
                    <li class="auth-required" style="display: none;"><a href="#" id="logoutLink">退出 (<span class="username-display">用户</span>)</a></li>
                </ul>
            </nav>
        </header>
        
        <!-- 首页页面 -->
        <section id="homePage" class="page">
            <!-- 未登录用户显示的内容 -->
            <div id="guestHomeContent">
                <div class="card neon-border">
                    <h2 class="card-title">欢迎使用 FinanceApp</h2>
                    <p>FinanceApp 是一款功能强大的个人财务管理应用，帮助您轻松记录收支、管理预算并生成详细的财务报表。</p>
                    
                    <div style="text-align: center; margin-top: 20px;">
                        <button class="btn" data-target="register">注册账户</button>
                        <button class="btn" data-target="login">登录</button>
                    </div>
                </div>
                
                <div class="dashboard">
                    <div class="card neon-border">
                        <h3 class="card-title">账单记录</h3>
                        <p>快速记录您的收入和支出，支持语音输入和文本输入。</p>
                    </div>
                    
                    <div class="card neon-border">
                        <h3 class="card-title">预算管理</h3>
                        <p>设置月度预算，实时监控支出情况，避免超支。</p>
                    </div>
                    
                    <div class="card neon-border">
                        <h3 class="card-title">智能分类</h3>
                        <p>AI智能分类技术，自动识别账单类型。</p>
                    </div>
                    
                    <div class="card neon-border">
                        <h3 class="card-title">数据可视化</h3>
                        <p>丰富的图表展示，直观了解财务状况。</p>
                    </div>
                    
                    <div class="card neon-border">
                        <h3 class="card-title">报表生成</h3>
                        <p>一键生成月度、年度财务报表。</p>
                    </div>
                    
                    <div class="card neon-border">
                        <h3 class="card-title">数据安全</h3>
                        <p>银行级加密技术，保障您的财务数据安全。</p>
                    </div>
                </div>
            </div>
            
            <!-- 已登录用户显示的内容 -->
            <div id="userHomeContent" style="display: none;">
                <div class="card neon-border">
                    <h2 class="card-title">欢迎回来，<span id="welcomeUsername">用户</span>！</h2>
                    <p>FinanceApp 帮助您轻松管理个人财务，让每一分钱都花得明明白白。</p>
                    
                    <div style="text-align: center; margin-top: 20px;">
                        <button class="btn" data-target="dashboard">查看仪表板</button>
                        <button class="btn" data-target="bills">记一笔账</button>
                    </div>
                </div>
                
                <div class="dashboard">
                    <!-- 快速统计 -->
                    <div class="card neon-border">
                        <h3 class="card-title">本月概览</h3>
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
                            <div class="card neon-border">
                                <h4>总收入</h4>
                                <p style="font-size: 1.5rem; color: #0f0;">¥0.00</p>
                            </div>
                            
                            <div class="card neon-border">
                                <h4>总支出</h4>
                                <p style="font-size: 1.5rem; color: #f00;">¥0.00</p>
                            </div>
                            
                            <div class="card neon-accent">
                                <h4>结余</h4>
                                <p style="font-size: 1.5rem; color: var(--accent-color);">¥0.00</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最近账单 -->
                    <div class="card neon-border">
                        <h3 class="card-title">最近账单</h3>
                        <div id="recentBills">
                            <p>暂无账单记录</p>
                        </div>
                    </div>
                    
                    <!-- 快速操作 -->
                    <div class="card neon-border">
                        <h3 class="card-title">快速操作</h3>
                        <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 15px;">
                            <button class="btn" data-target="bills">+ 记账</button>
                            <button class="btn" data-target="budgets">预算管理</button>
                            <button class="btn" data-target="reports">查看报表</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 登录页面 -->
        <section id="loginPage" class="page" style="display: none;">
            <div class="card neon-border">
                <h2 class="card-title">用户登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginPhone">手机号</label>
                        <input type="tel" id="loginPhone" class="form-control" placeholder="请输入手机号" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" class="form-control" placeholder="请输入密码" required>
                    </div>
                    
                    <div style="text-align: center;">
                        <button type="submit" class="btn">登录</button>
                        <button type="button" class="btn btn-accent" data-target="register">注册账户</button>
                    </div>
                </form>
            </div>
        </section>
        
        <!-- 注册页面 -->
        <section id="registerPage" class="page" style="display: none;">
            <div class="card neon-border">
                <h2 class="card-title">用户注册</h2>
                <form id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input type="text" id="registerUsername" class="form-control" placeholder="请输入用户名" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerPhone">手机号</label>
                        <input type="tel" id="registerPhone" class="form-control" placeholder="请输入手机号" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input type="password" id="registerPassword" class="form-control" placeholder="请输入密码" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerConfirmPassword">确认密码</label>
                        <input type="password" id="registerConfirmPassword" class="form-control" placeholder="请再次输入密码" required>
                    </div>
                    
                    <div style="text-align: center;">
                        <button type="submit" class="btn">注册</button>
                        <button type="button" class="btn" data-target="login">已有账户？登录</button>
                    </div>
                </form>
            </div>
        </section>
        
        <!-- 仪表板页面 -->
        <section id="dashboardPage" class="page" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">财务概览</h2>
                    <select class="form-control" style="width: auto;">
                        <option>本月</option>
                        <option>本季度</option>
                        <option>本年</option>
                    </select>
                </div>
                
                <div class="dashboard">
                    <!-- 收入卡片 -->
                    <div class="card neon-border">
                        <h3>总收入</h3>
                        <p style="font-size: 2rem; color: #0f0;">¥0.00</p>
                        <p>较上月 +0.0%</p>
                    </div>
                    
                    <!-- 支出卡片 -->
                    <div class="card neon-border">
                        <h3>总支出</h3>
                        <p style="font-size: 2rem; color: #f00;">¥0.00</p>
                        <p>较上月 +0.0%</p>
                    </div>
                    
                    <!-- 结余卡片 -->
                    <div class="card neon-accent">
                        <h3>结余</h3>
                        <p style="font-size: 2rem; color: var(--accent-color);">¥0.00</p>
                        <p>储蓄率 0.0%</p>
                    </div>
                </div>
                
                <!-- 图表区域 -->
                <h3>支出趋势</h3>
                <div class="chart-placeholder">
                    <p>支出趋势图表</p>
                </div>
                
                <h3>分类支出</h3>
                <div class="chart-placeholder">
                    <p>分类支出饼图</p>
                </div>
            </div>
            
            <!-- 快速操作 -->
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">快速操作</h2>
                </div>
                <div style="text-align: center; padding: 20px;">
                    <button class="btn btn-accent" style="font-size: 1.2rem; padding: 15px 30px;" data-target="bills">
                        + 记一笔
                    </button>
                </div>
            </div>
        </section>
        
        <!-- 账单页面 -->
        <section id="billsPage" class="page" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">账单管理</h2>
                    <button class="btn">筛选</button>
                </div>
                
                <div style="display: flex; gap: 10px; margin-bottom: 20px;">
                    <button class="btn">全部</button>
                    <button class="btn">收入</button>
                    <button class="btn">支出</button>
                </div>
                
                <!-- 记账表单 -->
                <div class="card neon-border">
                    <h3 class="card-title">快速记账</h3>
                    <form id="billForm">
                        <div class="form-group">
                            <label for="billType">类型</label>
                            <select id="billType" name="type" class="form-control" required>
                                <option value="expense" selected>支出</option>
                                <option value="income">收入</option>
                                <option value="transfer">转账</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="billAmount">金额</label>
                            <input type="number" id="billAmount" name="amount" class="form-control" step="0.01" placeholder="请输入金额" required>
                        </div>
                        
                        <!-- 转账账户选择 (默认隐藏) -->
                        <div id="transferAccounts" style="display: none;">
                            <div class="form-group">
                                <label for="sourceAccount">源账户</label>
                                <select id="sourceAccount" name="sourceAccount" class="form-control">
                                    <option value="">请选择源账户</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="targetAccount">目标账户</label>
                                <select id="targetAccount" name="targetAccount" class="form-control">
                                    <option value="">请选择目标账户</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="billTitle">标题</label>
                            <input type="text" id="billTitle" name="title" class="form-control" placeholder="请输入标题" required>
                        </div>
                        
                        <div class="form-group" id="categoryGroup">
                            <label for="billCategory">分类</label>
                            <select id="billCategory" name="categoryId" class="form-control" required>
                                <option value="">请选择分类</option>
                                <option value="1">工资</option>
                                <option value="2" selected>餐饮</option>
                                <option value="3">交通</option>
                                <option value="4">购物</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="billDescription">描述</label>
                            <input type="text" id="billDescription" name="description" class="form-control" placeholder="请输入描述">
                        </div>
                        
                        <div class="form-group">
                            <label for="billDate">日期</label>
                            <input type="date" id="billDate" name="date" class="form-control" required>
                        </div>
                        
                        <div style="text-align: center;">
                            <button type="submit" class="btn">记账</button>
                            <button type="button" id="resetBillForm" class="btn btn-accent">重置</button>
                        </div>
                    </form>
                </div>
                
                <!-- 加载指示器 -->
                <div class="loading-indicator" style="text-align: center; display: none;">
                    <p>加载中...</p>
                </div>
                
                <!-- 账单列表 -->
                <div class="bill-list">
                    <p class="no-data">暂无账单记录</p>
                </div>
            </div>
        </section>
        
        <!-- 预算页面 -->
        <section id="budgetsPage" class="page" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">预算管理</h2>
                    <button id="newBudgetBtn" class="btn">+ 新建预算</button>
                </div>
                
                <!-- 预算表单容器 -->
                <div class="budget-form-container" style="display: none;">
                    <div class="card neon-border">
                        <h3 class="card-title">预算设置</h3>
                        <form id="budgetForm">
                            <input type="hidden" id="budgetId" name="budgetId">
                            
                            <div class="form-group">
                                <label for="categoryId">分类</label>
                                <select id="categoryId" name="categoryId" class="form-control" required>
                                    <option value="">请选择分类</option>
                                    <option value="1">工资</option>
                                    <option value="2">餐饮</option>
                                    <option value="3">交通</option>
                                    <option value="4">购物</option>
                                    <option value="5">住房</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="amount">预算金额</label>
                                <input type="number" id="amount" name="amount" class="form-control" step="0.01" placeholder="请输入预算金额" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="period">预算周期</label>
                                <select id="period" name="period" class="form-control" required>
                                    <option value="monthly">月度</option>
                                    <option value="weekly">周度</option>
                                </select>
                            </div>
                            
                            <div style="text-align: center;">
                                <button type="submit" class="btn">保存</button>
                                <button type="button" id="closeBudgetForm" class="btn btn-accent">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- 加载指示器 -->
                <div class="loading-indicator" style="text-align: center; display: none;">
                    <p>加载中...</p>
                </div>
                
                <!-- 预算列表 -->
                <div class="budgets-list">
                    <div class="card">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h3>食品酒水</h3>
                                <p>预算: ¥1,500</p>
                            </div>
                            <div style="text-align: right;">
                                <p>已用: ¥1,245.50</p>
                                <p>剩余: ¥254.50</p>
                            </div>
                        </div>
                        <div style="margin-top: 10px; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden;">
                            <div style="width: 83%; height: 100%; background: var(--primary-color);"></div>
                        </div>
                    </div>
                    
                    <div class="card neon-accent">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h3>交通出行</h3>
                                <p>预算: ¥800</p>
                            </div>
                            <div style="text-align: right;">
                                <p>已用: ¥920.00</p>
                                <p style="color: var(--accent-color);">超支: ¥120.00</p>
                            </div>
                        </div>
                        <div style="margin-top: 10px; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden;">
                            <div style="width: 115%; height: 100%; background: var(--accent-color);"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 报表页面 -->
        <section id="reportsPage" class="page" style="display: none;">
            <div class="card neon-border">
                <div class="card-header">
                    <h2 class="card-title">财务报表</h2>
                </div>
                
                <!-- 报表筛选器 -->
                <div class="card neon-border">
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                        <div class="form-group">
                            <label for="reportType">报表类型</label>
                            <select id="reportType" class="form-control">
                                <option value="summary">汇总报表</option>
                                <option value="category">分类报表</option>
                                <option value="trend">趋势报表</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="timeRange">时间范围</label>
                            <select id="timeRange" class="form-control">
                                <option value="week">本周</option>
                                <option value="month" selected>本月</option>
                                <option value="quarter">本季度</option>
                                <option value="year">本年</option>
                                <option value="custom">自定义</option>
                            </select>
                        </div>
                        
                        <div class="form-group" id="customDateRange" style="display: none;">
                            <label for="startDate">开始日期</label>
                            <input type="date" id="startDate" class="form-control">
                        </div>
                        
                        <div class="form-group" id="customDateRangeEnd" style="display: none;">
                            <label for="endDate">结束日期</label>
                            <input type="date" id="endDate" class="form-control">
                        </div>
                    </div>
                    
                    <div style="text-align: center; margin-top: 15px;">
                        <button id="generateReport" class="btn">生成报表</button>
                    </div>
                </div>
                
                <!-- 加载指示器 -->
                <div class="loading-indicator" style="text-align: center; display: none;">
                    <p>生成报表中...</p>
                </div>
                
                <!-- 统计数据 -->
                <div class="stats-container">
                    <!-- 统计数据将在这里渲染 -->
                </div>
                
                <!-- 图表区域 -->
                <div class="chart-container">
                    <!-- 图表将在这里渲染 -->
                </div>
                
                <!-- 详细列表 -->
                <div class="details-container">
                    <!-- 详细列表将在这里渲染 -->
                </div>
            </div>
        </section>
    </div>
    
    <script src="components/auth.js"></script>
    <script src="components/bills.js"></script>
    <script src="components/reports.js"></script>
    <script src="components/budgets.js"></script>
    <script src="components/dashboard.js"></script>
    <script src="js/main.js"></script>
</body>
</html>